<template>
	<view class="main">
		<uni-row class="demo-uni-row">
			<uni-col :span="6">
				<RiskLevel v-model="params.AAA" @change="getList" style="padding: 0 2px;"></RiskLevel>
			</uni-col>
			<uni-col :span="6">
				<RiskType v-model="params.BBB" @change="getList" style="padding: 0 2px;"></RiskType>
			</uni-col>
			<uni-col :span="12">
				<uni-search-bar v-model="params.CCC" @confirm="getList" cancelButton="none" style="padding: 0 2px;" />
			</uni-col>
		</uni-row>
		<uni-segmented-control :current="params.DDD" :values="items" styleType="text" @clickItem="onClickItem"
			style="margin-bottom: 14px;" />
		<view>
			<scroll-view :style="{'height': (windowHeight - 190 - 50) + 'px'}" scroll-y="true">
				<view class="university" v-for="(item, index) in listData" :key="index+id"
					@click="detailsFormData(item)">
					<view class="universityNav">
						<p class="statsBox">已超时5天</p>
						<p class="title">张三-风险（婚恋纠纷）</p>
						<p>风险编号：暂无</p>
						<p>风险等级：暂无</p>
						<p>责任部门：暂无</p>
						<p>更新时间：暂无</p>
					</view>
				</view>
			</scroll-view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import RiskLevel from '@/components/riskLevel.vue'
	import RiskType from '@/components/riskType.vue'
	import {
		getUserNotify,
		readNotify
	} from "@/api/workspace.js";
	
	const windowHeight = uni.getSystemInfoSync().windowHeight //获取内容区高度

	const items = ref(['发现登记', '研判交办', '多元调处', '结案销号']);

	const params = ref({
		AAA: null,
		BBB: null,
		CCC: null,
		DDD: 0,
		pageSize: 10,
		pageNo: 1,
	});

	const listData = ref([{
		one: 1,
		tow: 2,
		three: 3,
		four: 4,
		five: 5,
	}, ]);

	const status = ref('more');
	const contentText = ref({
		contentdown: '查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	});

	const getList = async () => {
		uni.showLoading({
			title: '加载中...'
		});
		try {
			const res = await getUserNotify(params.value);
			uni.hideLoading(); //隐藏加载框
			if (params.value.pageNo === 1) {
				listData.value = res.data.records;
			} else {
				// 将新数据追加到现有数据
				listData.value = listData.value.concat(res.data.records);
			}

			// 判断是否还有更多数据
			if (res.data.records.length < params.value.pageSize) {
				status.value = 'noMore'; // 没有更多数据
			} else {
				status.value = 'more'; // 还有更多数据
			}
		} catch (err) {
			// 处理错误
		}
	};

	const onClickItem = (e) => {
		if (params.value.DDD !== e.currentIndex) {
			params.value.DDD = e.currentIndex;
			getList();
		}
	};
	
	const detailsFormData = (item) => {
		uni.navigateTo({
			url: `/pages/workspace/components/detailsPage?id=${item.id}`
		});
	};

	onMounted(() => {
		// 可以在这里调用 getList() 获取初始数据
		// getList();
	});

	// 上拉加载
	const onReachBottom = () => {
		if (status.value === 'noMore') {
			return;
		}
		params.value.pageNo++;
		getList();
	};

</script>

<style lang="less" scoped>
	.main {
		padding: 10px;
		background-color: #fff;
	}

	.university {
		border: 1px solid #c7c9ce;
		border-radius: 6px;
		padding: 6px 10px;
		margin-bottom: 10px;
	}

	.universityNav {
		position: relative;
		font-size: 14px;
		line-height: 26px;

		.statsBox {
			background-color: #8f8f8f;
			color: #fff;
			padding: 2px 6px;
			position: absolute;
			right: -11px;
			top: -7px;
			border-radius: 0px 6px 0px 0px;
		}

		.title {
			font-weight: bold;
		}
	}
</style>